<template>
    <div class="printer-all">
        <div :class="['printer_customer', tabActiveName == 'printerManage' ? 'printer_manage' : 'printer_rule']">
            <el-tabs v-model="tabActiveName">
                <el-tab-pane v-for="{ label, name } in tabList" :key="name" :label="label" :name="name"></el-tab-pane>
            </el-tabs>
            <div class="printer-tips" v-show="tabActiveName == 'printerManage'">
                <div class="printer-title">小票打印机</div>
                <div>小票打印机支持打印同城配送和上门自提的订单，目前仅支持飞鹅58mm云打印机。</div>
            </div>
        </div>
        <component :is="componentId"></component>
    </div>
</template>
<script setup>
import { computed, reactive, ref, defineAsyncComponent, onMounted, onUnmounted } from 'vue';
import { setLayout, resetLayout } from '@/hooks/layout';
const tabList = reactive([
    { name: 'printerManage', label: '打印机管理' },
    { name: 'printerRule', label: '打印规则' }
]);
let tabActiveName = ref('printerManage');
const componentId = computed(() => {
    const defineAsyncComponents = {
        printerManage: defineAsyncComponent(() => import('./manage.vue')),
        printerRule: defineAsyncComponent(() => import('./rule.vue'))
    };
    return defineAsyncComponents[tabActiveName.value];
});

onMounted(() => {
    setLayout('custom-printer-layout');
});
onUnmounted(() => {
    resetLayout('custom-printer-layout');
});
</script>
<style lang="scss">
.custom-printer-layout {
    height: 100%;
    padding: 0 !important;
    background-color: unset !important;
}
</style>
<style lang="scss" scoped>
.printer-all {
    height: 100%;
}
.printer_rule {
    padding: 10px 24px 0 24px;
    box-sizing: border-box;
    .el-tabs {
        height: 40px;
    }
    :deep(.el-tabs__nav-wrap::after) {
        height: 0 !important;
    }
}
.printer_manage {
    padding: 10px 24px 24px 24px;
    box-sizing: border-box;
    height: 150px;
}
.printer_customer {
    background-color: #fff;
    :deep {
        .el-tabs__nav-wrap::after {
            height: 1px;
        }
    }
    .printer-tips {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 16px;
        .printer-title {
            color: #33302d;
            font-weight: 500;
            margin: 15px 0;
        }
    }
}
</style>
